<template>
    <div>
        <el-dialog title="案件指派" :visible.sync="assignDialog" width="30%">
            <el-form label-width="110px" :model="ruleForm" style="width: 80%;margin-left:40px;" size="small">
                <el-form-item label="报案号:">
                    <el-input v-model="ruleForm.caseNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="车牌号:">
                    <el-input v-model="ruleForm.carNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="事故类型:">
                    <el-input v-model="ruleForm.accidentLabel" disabled></el-input>
                </el-form-item>
                <el-form-item label="车辆类型:">
                    <el-input v-model="ruleForm.cartLabel" disabled></el-input>
                </el-form-item>
                <el-form-item label="查勘员工号:">
                    <el-input v-model="ruleForm.seatUserId" disabled></el-input>
                </el-form-item>
                <el-form-item label="查勘员姓名:">
                    <el-input v-model="ruleForm.seatUserName" disabled></el-input>
                </el-form-item>
                <el-form-item label="渠道名称:">
                    <el-input v-model="ruleForm.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="处理坐席:">
                    <el-select v-model="ruleForm.operator" filterable placeholder="请选择">
                        <el-option v-for="item in manageList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="assignDialog = false">取 消</el-button>
                <el-button type="danger" @click="assign()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getGroupUser } from '@/api/newRules'
import { caseTransfer } from '@/api/case'

export default {
    props: {
        assignInfo: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {
            assignDialog: false,
            ruleForm: this.assignInfo,
            manageList: [{ label: '', value: '' }],

        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    methods: {
        assign() {
            const params = {
                operator: this.assignInfo.operator,
                seatUserId: this.userInfo.userId,
                taskId: this.assignInfo.taskId
            }
            caseTransfer(params).then(() => {
                this.assignDialog = false;
                this.$emit("search-list")
                this.$message({
                    message: '指派成功',
                    type: 'success'
                })
            })
        },
        getGroupUser() {
            getGroupUser({ groupId: this.userInfo.group }).then(res => {
                this.manageList = res.userList.map(item => {
                    item = {
                        label: item.userName,
                        value: item.userId
                    }
                    return item
                })
            })
        },
        showDialog() {
            this.getGroupUser()
            this.assignDialog = true;
        }
    },
    watch: {
        assignInfo: {
            handler(item) {
                this.ruleForm = item
            },
        },
    },
}
</script>
<style lang='scss' scoped></style>
